<template>
  <div class="app-container">
    <div class="container">
      <el-row :gutter="20">
        <!-- 左侧 -->
        <el-col :span="16">
          <!-- 博客正文 -->
          <div class="blog-box">
            <!-- 博客主要内容 -->
            <div class="blog-content">
              <h3 class="title">蘑菇博客Sentinel安装指南</h3>
              <!-- 博客简介 -->
              <div class="blog-info">
                <ul>
                  <li class="author">
                    <i class="el-icon-user-solid"></i>
                    <a href="">mogu2022</a>
                  </li>
                  <li class="lmname">
                    <i class="el-icon-menu"></i>
                    <a href="">后端开发1</a>
                  </li>
                  <li class="createTime">
                    <i class="el-icon-time"></i>
                    2020-08-19 06:20:31
                  </li>
                  <li class="view">
                    <i class="el-icon-view"></i>
                    148
                  </li>
                  <li class="like">
                    <i class="el-icon-thumb"></i>
                    2384
                  </li>
                </ul>
              </div>
              <!-- 分类标签 -->
              <div class="tags">
                <a href="javascript:void(0);" target="_blank">Spring Cloud</a>
              </div>
              <!-- 版权提示 -->
              <div class="about">
                <strong>版权</strong>
                <span>
                  本文为蘑菇博客原创文章，转载无需和我联系，但请注明来自蘑菇博客http://www.moguit.cn
                </span>
              </div>
              <!-- 具体内容 -->
              <div class="content">
                <h1>垃圾回收相关算法</h1>

                <h2>标记阶段：引用计数算法</h2>

                <p>
                  在堆里存放着几乎所有的Java对象实例，在GC执行垃圾回收之前，首先需要区分出内存中哪些是存活对象，哪些是已经死亡的对象。只有被标记为己经死亡的对象，GC才会在执行垃圾回收时，释放掉其所占用的内存空间，因此这个过程我们可以称为垃圾标记阶段。
                </p>
                <blockquote>
                  <p>
                    每次赋值都需要更新计数器，伴随着加法和减法操作，这增加了时间开销。
                    引用计数器有一个严重的问题，即无法处理循环引用的情况。这是一条致命缺陷，导致在Java的垃圾回收器中没有使用这类算法。
                  </p>
                </blockquote>

                <blockquote>
                  <p>
                    每次赋值都需要更新计数器，伴随着加法和减法操作，这增加了时间开销。
                    引用计数器有一个严重的问题，即无法处理循环引用的情况。这是一条致命缺陷，导致在Java的垃圾回收器中没有使用这类算法。
                  </p>
                </blockquote>

                <pre>
<code class="language-java">/**
 * 引用计数算法测试
 *
 * @author: 陌溪
 * @create: 2020-07-12-10:26
 */
public class RefCountGC {
    // 这个成员属性的唯一作用就是占用一点内存
    private byte[] bigSize = new byte[5*1024*1024];
    // 引用
    Object reference = null;

    public static void main(String[] args) {
        RefCountGC obj1 = new RefCountGC();
        RefCountGC obj2 = new RefCountGC();
        obj1.reference = obj2;
        obj2.reference = obj1;
        obj1 = null;
        obj2 = null;
        // 显示的执行垃圾收集行为，判断obj1 和 obj2是否被回收？
        System.gc();
    }
}
</code></pre>

                <p>运行结果</p>

                <p>
                  | | 标记清除 | 标记整理 | 复制 | | ------------ |
                  ------------------ | ---------------- |
                  ------------------------------------- | |
                  <strong>速率</strong> | 中等 | 最慢 | 最快 | |
                  <strong>空间开销</strong> | 少（但会堆积碎片） |
                  少（不堆积碎片） | 通常需要活对象的2倍空间（不堆积碎片） | |
                  <strong>移动对象</strong> | 否 | 是 | 是 |
                </p>

                <ul>
                  <li>Mark阶段的开销与存活对象的数量成正比。</li>
                  <li>Sweep阶段的开销与所管理区域的大小成正相关。</li>
                  <li>compact阶段的开销与存活对象的数据成正比。</li>
                </ul>

                <p>
                  注意，这些只是基本的算法思路，实际GC实现过程要复杂的多，目前还在发展中的前沿GC都是复合算法，并且并行和并发兼备。
                </p>
              </div>
            </div>
          </div>
          <!-- 文章打赏 -->
          <div class="reward">
            <div class="info">
              <el-avatar
                size="large"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                class="avatar"
              ></el-avatar>
              mogo2022
            </div>
            <div class="detail">
              <el-tooltip effect="light" content="点赞" placement="top">
                <span>
                  <i class="iconfont icon-dianzan"></i>
                  0
                </span>
              </el-tooltip>
              <el-tooltip effect="light" content="踩" placement="top">
                <span>
                  <i class="iconfont icon-cai"></i>
                  0
                </span>
              </el-tooltip>
              <el-tooltip effect="light" content="评论" placement="top">
                <span>
                  <i class="el-icon-chat-dot-square"></i>
                  0
                </span>
              </el-tooltip>
              <el-tooltip effect="light" content="收藏" placement="top">
                <span>
                  <i class="iconfont icon-shoucang"></i>
                  13
                </span>
              </el-tooltip>
              <el-tooltip effect="light" content="打赏" placement="top">
                <span>
                  <i
                    class="iconfont icon-dashang"
                    @click="dashangFlag = true"
                  ></i>
                </span>
              </el-tooltip>
            </div>
          </div>

          <!-- 评论:传入唯一ID -->
          <Comments :commentsId='123'></Comments>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="8">
          <div class="blogger-info">
            <p class="avatar">
              <img src="@/assets/logo.png" alt="" />
            </p>
            <p class="abname">mogu2022</p>
            <p class="info">
              <span>码龄3年</span>
              <span><i class="el-icon-postcard"></i> 高校学生</span>
            </p>
            <div class="data">
              <dl v-for="item in 5" :key="item">
                <a href="">
                  <dt>
                    <span class="count">136</span>
                  </dt>
                  <dd class="font">原创</dd>
                </a>
              </dl>
            </div>
            <div class="btn">
              <span class="msg">私信</span>
              <span class="focus">关注</span>
            </div>
          </div>
          <div class="newest">
            <div class="compont-title">
              <div class="top-title">
                <h3>最新文章</h3>
              </div>
            </div>
            <div class="newest-content">
              <p v-for="item in 5" :key="item">
                <a href="">垃圾回收相关算法垃圾回收相关算法垃圾回收相关算法</a>
                <span class="view">
                  <i class="el-icon-view"></i>
                  123
                </span>
              </p>
            </div>
          </div>
          <div class="special">
            <div class="compont-title">
              <div class="top-title">
                <h3>分类专栏</h3>
              </div>
            </div>
            <div class="special-content">
              <ul>
                <li v-for="item in 5" :key="item">
                  <a href="">
                    <div class="bar"></div>
                    <img src="@/assets/logo.png" alt="" />
                    <span class="title">{{ item }}</span>
                  </a>
                  <span class="num">{{ item }}篇</span>
                </li>
              </ul>
              <div class="more">
                <i class="el-icon-arrow-down"></i>
              </div>
            </div>
          </div>
          <div class="comments-new">
            <div class="compont-title">
              <div class="top-title">
                <h3>最新评论</h3>
              </div>
            </div>
            <div class="comments-new-content">
              <p v-for="item in 5" :key="item">
                <a href="">垃圾回收相关算法垃圾回收相关算法垃圾回收相关算法</a>
                <span class="view">
                  <i class="el-icon-time"></i>
                  2022-05-04
                </span>
              </p>
            </div>
          </div>
          <div class="menu">
            <div class="compont-title">
              <div class="top-title">
                <h3>目录</h3>
              </div>
            </div>
            <div class="menu-content">
              <ol>
                <li>第一章</li>
              </ol>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 打赏作者弹窗 -->
    <el-dialog
      title="打赏作者"
      :visible.sync="dashangFlag"
      width="30%"
      :before-close="dashanghandleClose"
      class="dashangbox"
    >
      <!-- 作者信息 -->
      <div class="avatar-info">
        <el-avatar
          size="large"
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          class="avatar"
        ></el-avatar>
        <div>
          <p style="font-size: 14px">mogo2022</p>
          <p style="font-size: 12px">你的鼓励将是我创作的最大动力</p>
        </div>
      </div>
      <!-- 打赏金额 -->
      <div class="money-box">
        <ul>
          <li
            @click="payMoney = '2'"
            :class="payMoney === '2' ? 'choosed' : ''"
          >
            ¥2
          </li>
          <li
            @click="payMoney = '4'"
            :class="payMoney === '4' ? 'choosed' : ''"
          >
            ¥4
          </li>
          <li
            @click="payMoney = '6'"
            :class="payMoney === '6' ? 'choosed' : ''"
          >
            ¥6
          </li>
          <li
            @click="payMoney = '10'"
            :class="payMoney === '10' ? 'choosed' : ''"
          >
            ¥10
          </li>
          <li
            @click="payMoney = '20'"
            :class="payMoney === '20' ? 'choosed' : ''"
          >
            ¥20
          </li>
          <li
            @click="payMoney = '100'"
            :class="payMoney === '100' ? 'choosed' : ''"
          >
            ¥100
          </li>
        </ul>
      </div>
      <!-- 支付方式 -->
      <div class="pay-type">
        <el-radio
          v-model="paytype"
          @change="showPayCode = !showPayCode"
          label="1"
          >余额支付</el-radio
        >
        <el-radio v-model="paytype" @change="showBox" label="2"
          >扫码支付</el-radio
        >
      </div>
      <!-- 扫码支付 -->
      <el-collapse-transition>
        <div class="pay-code" v-show="showPayCode">
          <div class="code-num-box">
            <span class="code-name">扫码支付：</span>
            <span class="code-num">¥{{ payMoney }}</span>
          </div>
          <div class="code-img-box">
            <div class="img"></div>
          </div>
        </div>
      </el-collapse-transition>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dashangFlag = false">取 消</el-button>
        <el-button type="primary" @click="dashangFlag = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Comments from '../../components/comments.vue'
export default {
  name: 'blog',
  components: {
    Comments
  },
  data() {
    return {
      comments: '', //评价内容
      dashangFlag: false, // 打赏的弹窗
      paytype: '1', // 支付方式
      showPayCode: false, //打开展示二维码支付
      payMoney: '2' //支付的金额
    }
  },
  methods: {
    // 关闭打赏作者弹窗的方法
    dashanghandleClose() {
      this.dashangFlag = false
    },
    // 展示扫码支付的二维码
    showBox() {
      this.showPayCode = !this.showPayCode
    }
  },
  created(){
    console.log(document.title)
    document.title = '蘑菇博客Sentinel安装指南/'
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 20px;
  background: rgb(245, 245, 245);
}
.blog-box {
  background: #fff;
  /*博客内容*/
  .blog-content {
    padding: 0px 30px;
    background-image: linear-gradient(
        90deg,
        rgba(50, 0, 0, 0.05) 3%,
        transparent 0
      ),
      linear-gradient(1turn, rgba(50, 0, 0, 0.05) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
    .title {
      font-size: 24px;
      padding: 30px 0 0;
      color: #333;
      font-weight: 400;
    }
    .blog-info {
      overflow: hidden;
      margin-top: 20px;
      ul {
        li {
          font-size: 14px;
          padding: 0 0 0 20px;
          color: #748594;
          line-height: 1.5;
          display: inline-block;
        }
        li:first-child {
          padding: 0px;
        }
      }
    }
    .tags {
      margin: 20px 0;
      a {
        background: #f4650e;
        padding: 3px 8px;
        margin: 0 5px 0 0;
        color: #fff;
      }
    }
    .about {
      color: #888;
      border: 1px solid #f3f3f3;
      padding: 10px;
      margin: 20px auto 15px;
      line-height: 23px;
      background: none repeat 0 0 #f6f6f6;
      strong {
        color: #38485a;
        font-weight: 400 !important;
        font-size: 13px;
        padding-right: 8px;
      }
      span {
        font-size: 13px;
      }
    }
    .content {
      line-height: 1.8;
      font-size: 16px;
      text-align: justify;
      h1 {
        font-weight: 700 !important;
        font-size: 32px !important;
        margin: 21px 0 !important;
      }
      h2 {
        font-weight: 700 !important;
        font-size: 24px !important;
        margin: 19px 0 !important;
      }
      p,
      pre {
        margin: 12px 0 !important;
      }
      ul {
        padding-left: 40px !important;
        padding-right: 40px !important;
        li {
          list-style: disc;
        }
      }
      a {
        text-decoration: underline !important;
        color: #00e !important;
      }
      img,
      video {
        max-width: 740px;
        height: auto;
      }
      code {
        display: block;
        overflow-x: auto;
        padding: 0.5em;
        background: #3f3f3f;
        color: #dcdcdc;
      }
      blockquote {
        overflow: hidden;
        padding-right: 1.5em;
        padding-left: 1.5em;
        margin-left: 0;
        margin-right: 0;
        font-style: italic;
        border-left: 5px solid #ccc;
      }
    }
  }
}
.reward {
  background: #fff;
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info {
    display: flex;
    align-items: center;
    width: 140px;
    justify-content: space-between;
    font-size: 18px;
  }
  .detail {
    width: 200px;
    display: flex;
    justify-content: space-between;
    span {
      cursor: pointer;
      i {
        font-size: 18px;
      }
    }
  }
}

.blogger-info {
  margin-bottom: 16px;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  background: #fff url('../../assets/images/author-bg.png') no-repeat top;
  overflow: hidden;
  padding: 35px 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, 0.1);
  .avatar {
    margin: 40px auto 20px;
    width: 100px;
    img {
      width: 100px;
      border-radius: 50%;
      border: 1px solid salmon;
    }
  }
  .abname {
    color: #3f3f3f;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: center;
  }
  .info {
    color: #999;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    i {
      margin-left: 10px;
      color: red;
    }
  }
  .data {
    display: flex;
    justify-content: space-between;
    padding: 9px 10px;
    dl {
      text-align: center;
    }
    .count {
      color: #4a4d52;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
    }
    dd {
      color: #222226;
      font-size: 14px;
      line-height: 22px;
      padding: 3px 0;
    }
  }
  .btn {
    display: flex;
    justify-content: space-evenly;
    margin-top: 15px;
    span {
      border: #748594 solid 1px;
      padding: 5px 40px;
      border-radius: 50px;
    }
  }
}
.newest {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .newest-content {
    padding: 16px 24px;
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 270px;
        line-height: 40px;
      }
      .view {
        margin-left: 15px;
        color: #999;
        font-size: 13px;
      }
    }
  }
}
.special {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .special-content {
    padding: 16px 24px;
    ul {
      border-left: 1px dashed #ccccd8;
      li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 16px;
        a {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          color: #555666;
          font-size: 14px;
          line-height: 24px;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          overflow: hidden;
          position: relative;
          .bar {
            width: 12px;
            height: 1px;
            border-bottom: 1px dashed #ccccd8;
            -ms-flex-negative: 0;
            flex-shrink: 0;
          }
          img {
            width: 24px;
            height: 24px;
            border: 1px solid #e8e8ed;
            border-radius: 2px;
            display: block;
            margin-right: 8px;
            margin-left: 4px;
          }
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .more {
      text-align: center;
    }
  }
}
.comments-new {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  .comments-new-content {
    padding: 16px 24px;
    p {
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 240px;
        line-height: 40px;
      }
      .view {
        margin-left: 15px;
        color: #999;
        font-size: 13px;
      }
    }
  }
}
.menu {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid #f0f0f2;
}
.dashangbox {
  .avatar-info {
    display: flex;
    .avatar {
      margin-right: 15px;
    }
  }
  .money-box {
    ul {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: space-around;
      padding-top: 20px;
      li {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 10px;
        border: 1px solid #e8e8ed;
        color: #999aaa;
      }
      li.choosed {
        border: 1px solid #556;
        font-size: 20px;
        font-weight: 500;
        color: #222226;
      }
      input {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 10px;
        border: 1px solid #e8e8ed;
        color: #999aaa;
      }
    }
  }
  .pay-type {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0;
  }
  .pay-code {
    border-top: 1px solid #f0f0f2;
    padding-top: 16px;
    .code-num-box {
      text-align: center;
      line-height: 25px;
      font-size: 18px;
      margin-bottom: 16px;
      .code-name {
        color: #222226;
        font-weight: 500;
      }
      .code-num {
        color: #fc5531;
      }
    }
    .code-img-box {
      width: 120px;
      height: 120px;
      overflow: hidden;
      margin: auto;
      margin-bottom: 8px;
      .img {
        width: 120px;
        height: 120px;
        background: #666;
        text-align: center;
        padding-top: 22px;
      }
    }
  }
}
</style>
